<!-- 举报处理页面 -->
<main class="flex-1 ml-64 flex flex-col h-screen overflow-hidden" id="mainContent">
    <{include file="main_header.html"}>
    
    <!-- 内容区域 -->
    <div class="flex-1 overflow-y-auto p-6 scrollbar-thin">
        <!-- 数据概览 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div class="bg-white rounded-xl shadow-sm p-5 border border-neutral-200">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <p class="text-neutral-500 text-sm">待处理举报</p>
                        <h3 class="text-2xl font-bold mt-1" id="pendingReportCount">24</h3>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                        <i class="fa fa-clock-o"></i>
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-danger flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 5.2%
                    </span>
                    <span class="text-neutral-400 ml-2">较昨日</span>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 border border-neutral-200">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <p class="text-neutral-500 text-sm">已处理举报</p>
                        <h3 class="text-2xl font-bold mt-1" id="processedReportCount">156</h3>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center text-success">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-success flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 12.8%
                    </span>
                    <span class="text-neutral-400 ml-2">较昨日</span>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 border border-neutral-200">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <p class="text-neutral-500 text-sm">已驳回举报</p>
                        <h3 class="text-2xl font-bold mt-1" id="rejectedReportCount">48</h3>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500">
                        <i class="fa fa-ban"></i>
                    </div>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-danger flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 3.5%
                    </span>
                    <span class="text-neutral-400 ml-2">较昨日</span>
                </div>
            </div>
        </div>
        
        <!-- 举报筛选和操作 -->
        <div class="bg-white rounded-xl shadow-sm border border-neutral-200 mb-6 overflow-hidden">
            <div class="p-5 border-b border-neutral-200">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <h3 class="font-bold">举报处理</h3>
                    
                    <div class="flex flex-wrap items-center gap-3">
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="reportStatusFilter">
                                <option value="">全部状态</option>
                                <option value="1">待处理</option>
                                <option value="2">已处理</option>
                                <option value="3">已驳回</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>

                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="reportTypeFilter">
                                <option value="">全部类型</option>
                                <option value="媒体">媒体</option>
                                <option value="言论">言论</option>
                                <option value="合集">合集</option>
                                <option value="认证">认证</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="sortFilter">
                                <option value="0">默认排序</option>
                                <option value="1">举报时间 降序</option>
                                <option value="2">举报时间 升序</option>
                                <option value="3">处理状态 待处理优先</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        
                        <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="filterBtn">
                            <i class="fa fa-filter mr-1"></i> 筛选
                        </button>
                        
                        <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors" id="resetBtn">
                            <i class="fa fa-refresh mr-1"></i> 重置
                        </button>
                    </div>
                </div>
                
                <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs text-neutral-500 mb-1">举报ID/被举报内容ID</label>
                        <input type="text" class="w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="keywordSearch">
                    </div>
                    
                    <div>
                        <label class="block text-xs text-neutral-500 mb-1">举报人ID</label>
                        <input type="text" class="w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="reporterSearch">
                    </div>
                    
                    <div>
                        <label class="block text-xs text-neutral-500 mb-1">举报时间范围</label>
                        <div class="flex space-x-2">
                            <input type="date" class="flex-1 bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="startDate">
                            <span class="flex items-center text-neutral-400">至</span>
                            <input type="date" class="flex-1 bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="endDate">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 批量操作工具栏 -->
            <div class="p-5 border-b border-neutral-200 flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center space-x-3">
                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="batchClaimBtn" disabled>
                        <i class="fa fa-hand-paper-o mr-1"></i> 批量认领
                    </button>
                    <button class="bg-success hover:bg-success/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="batchProcessBtn" disabled>
                        <i class="fa fa-check mr-1"></i> 批量处理
                    </button>
                    <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors" id="batchRejectBtn" disabled>
                        <i class="fa fa-times mr-1"></i> 批量驳回
                    </button>
                    <span class="text-sm text-neutral-500 ml-3" id="selectedCount">已选择 0 项</span>
                </div>
            </div>
            
            <!-- 举报列表 -->
            <div class="overflow-x-auto">
                <table class="w-full" id="reportTable">
                    <thead>
                        <tr class="bg-neutral-50 text-left">
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                <input type="checkbox" id="selectAll" class="rounded border-neutral-300 text-primary focus:ring-primary">
                            </th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">举报ID</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">被举报内容</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">举报原因</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">举报人</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">举报时间</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">处理状态</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">认领信息</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-neutral-200 bg-white" id="reportTableBody">
                        <!-- 表格内容将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="px-5 py-4 border-t border-neutral-200 flex items-center justify-between">
                <div class="text-sm text-neutral-500 pagenation">
                    显示 1 至 10 条，共 228 条
                </div>
                <div class="flex space-x-1" id="reportPagination">
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-400 hover:border-primary hover:text-primary disabled:opacity-50" disabled>
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">3</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">4</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">5</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 处理举报模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="processModal">
    <div class="bg-white rounded-xl w-full max-w-md p-6">
        <h3 class="text-lg font-bold mb-2" id="processModalTitle">处理举报</h3>
        <p class="text-neutral-500 mb-4" id="processModalMessage">请选择对该举报的处理方式</p>
        
        <!-- 批量操作时显示选中数量 -->
        <div class="mb-4 hidden" id="batchProcessInfo">
            <p class="text-sm text-neutral-500 p-2 bg-neutral-100 rounded-lg" id="batchProcessCount"></p>
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-medium mb-2">处理方式</label>
            <div class="space-y-2">
                <label class="flex items-center p-3 border border-neutral-200 rounded-lg cursor-pointer hover:bg-neutral-50">
                    <input type="radio" name="processType" value="confirm" class="text-primary focus:ring-primary" checked>
                    <span class="ml-2">确认举报有效，处理被举报内容</span>
                </label>
                <label class="flex items-center p-3 border border-neutral-200 rounded-lg cursor-pointer hover:bg-neutral-50">
                    <input type="radio" name="processType" value="reject" class="text-primary focus:ring-primary">
                    <span class="ml-2">驳回举报，内容无违规</span>
                </label>
            </div>
        </div>
        
        <div class="mb-4" id="violationTypeContainer">
            <label class="block text-sm font-medium mb-1">违规类型</label>
            <div class="relative">
                <select id="violationTypeSelect" class="appearance-none w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    <option value="">请选择违规类型</option>
                    <option value="色情低俗">色情低俗</option>
                    <option value="暴力恐怖">暴力恐怖</option>
                    <option value="政治敏感">政治敏感</option>
                    <option value="广告营销">广告营销</option>
                    <option value="垃圾内容">垃圾内容</option>
                    <option value="其他">其他</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
            </div>
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-medium mb-1">处理备注（可选）</label>
            <textarea id="processRemark" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" rows="3" placeholder="请输入处理备注..."></textarea>
        </div>
        
        <div class="flex space-x-3">
            <button class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelProcessBtn">取消</button>
            <button class="flex-1 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" id="confirmProcessBtn">确认处理</button>
        </div>
    </div>
</div>

<!-- 认领模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="claimModal">
    <div class="bg-white rounded-xl w-full max-w-md p-6">
        <h3 class="text-lg font-bold mb-2">认领举报处理</h3>
        <p class="text-neutral-500 mb-4" id="claimModalMessage">您确定要认领此举报处理任务吗？认领后其他审核员将无法操作。</p>
        
        <!-- 批量操作时显示 -->
        <div class="mb-4 hidden" id="batchClaimInfo">
            <p class="text-sm text-neutral-500 p-2 bg-neutral-100 rounded-lg" id="batchClaimCount"></p>
        </div>
        
        <div class="flex space-x-3">
            <button class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelClaimBtn">取消</button>
            <button class="flex-1 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" id="confirmClaimBtn">确认认领</button>
        </div>
    </div>
</div>

<!-- 被举报内容预览模态框 -->
<div id="contentPreviewModal" class="fixed inset-0 bg-black/80 z-50 hidden items-center justify-center p-4">
    <div class="relative max-w-5xl w-full max-h-[90vh] overflow-hidden rounded-lg bg-white">
        <!-- 关闭按钮 -->
        <button id="closePreviewModal" class="absolute top-4 right-4 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center z-10 hover:bg-black/70 transition-colors">
            <i class="fa fa-times"></i>
        </button>
        
        <!-- 预览内容容器 -->
        <div class="p-6 overflow-y-auto max-h-[90vh]" id="previewContent">
            <h3 class="text-xl font-bold mb-4" id="previewTitle">内容预览</h3>
            <div class="mb-4">
                <p class="text-sm text-neutral-500 mb-1">内容ID: <span id="previewContentId"></span></p>
                <p class="text-sm text-neutral-500">内容类型: <span id="previewContentType"></span></p>
            </div>
            <div class="border-t border-neutral-200 pt-4" id="previewContentBody">
                <!-- 预览内容将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
</div>

<script src="/i/js/report.js"></script>
